<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>珠峰培训-QQ音乐播放器</title>

    <!--IMPORT CSS-->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">

    <!--REM-->
    <script>
        ~function () {
            computedFont();
            window.addEventListener('resize', computedFont, false);
            function computedFont() {
                var deviceW = document.documentElement.clientWidth;
                if (deviceW > 640) return;
                document.documentElement.style.fontSize = deviceW / 640 * 100 + 'px';
            }
        }();
    </script>
</head>
<body>
<section class="container">
    <!--
        AUDIO
        1、controls:显示自带的播放器(不设置则默认不显示)
        2、loop:播放完成后循环播放
        3、autoplay:页面进入的时候就开始自动播放
        4、preload:设置音频的预加载方式
            none:开始加载页面的时候,音频不加载,只有设置播放的时候在加载
            metadata:开始只加载音频头部信息(时长\专辑...)
            auto:开始加载页面的时候就加载全部的信息
    -->
    <audio src="img/myDream.m4a" preload="none" id="musicAudio"></audio>

    <div class="backgroundImg"></div>
    <div class="background"></div>

    <!--HEADER-->
    <header class="header">
        <div class="content">
            <img src="img/myDream.jpg" alt="">
            <h2>
                <span>我的梦</span>
                <span>张靓颖</span>
            </h2>
        </div>
        <a href="javascript:;" class="musicBtn"></a>
    </header>

    <!--MAIN-->
    <main class="main">
        <div class="wrapper">
            <!--<p class="select">大河向东流 天上的星星参北斗</p>-->
        </div>
    </main>

    <!--FOOTER-->
    <footer class="footer">
        <div class="progress">
            <span class="current">00:00</span>
            <span class="duration">00:00</span>
            <div class="proBg">
                <div class="already"></div>
            </div>
        </div>
        <a href="javascript:;" class="down">下载这首音乐</a>
    </footer>
</section>

<!--IMPORT JS-->
<script src="js/zepto.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>